<template>
  <el-row style="height: 40vh;">
    <el-col :span="12">
      <div id="main" style="width: 100%; height: 100%;"></div>
    </el-col>
    <el-col :span="12">
      <div id="main1" style="width: 100%; height: 100%;"></div>
    </el-col>
  </el-row>
  <el-row style="height: 40vh;margin-top: 20px;">
    <el-col :span="8">
      <div id="main3" style="width: 100%; height: 100%;"></div>
    </el-col>
    <el-col :span="8">
      <div id="main4" style="width: 100%; height: 100%;"></div>
    </el-col>
    <el-col :span="8">
      <div id="main5" style="width: 100%; height: 100%;"></div>
    </el-col>
  </el-row>


</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue'

onMounted(() => {
  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    title: {
      text: '热门商品 Top 10',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'], // 热门商品列表  
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '借阅量',
      type: 'bar',
      barWidth: '60%',
      data: [120, 200, 150, 80, 70, 110, 130, 100, 90, 100] // 对应的借阅量数据  
    }]
  };
  window.onresize = myChart.resize;
  myChart.setOption(option);
})


onMounted(() => {
  var myChart = echarts.init(document.getElementById('main1'));
  var option = {
    title: {
      text: '商品库存统计表',
      left: 'center'
    },
    tooltip: {},
    xAxis: {
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"] // 时间数据  
    },
    yAxis: {},
    series: [{
      name: '库存量',
      type: 'line', // 折线图  
      stack: '总量', // 如果需要堆叠，可以设置相同的 stack 值  
      data: [1000, 1200, 1100, 800, 700, 1100, 1300, 1200, 1100, 900, 800, 1000] // 库存数据  
    }]
  };
  window.onresize = myChart.resize;
  myChart.setOption(option);
})
onMounted(() => {
  var myChart = echarts.init(document.getElementById('main3'));
  var option = {
    title: {
      text: '用户信息统计表',
      subtext: '用户类型分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '用户类型',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '学生' },
          { value: 310, name: '教师' },
          { value: 234, name: '社会人士' },
          { value: 135, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  window.onresize = myChart.resize;
  myChart.setOption(option);
})
onMounted(() => {
  var myChart = echarts.init(document.getElementById('main4'));
  var option = {
    title: {
      text: '商品出售统计报表',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis' // 触发类型，默认数据触发，可选为：'item'、'axis'  
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 去掉两端空白  
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] // x轴数据，可以根据实际情况修改  
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '商品出售数量',
      type: 'line', // 折线图  
      data: [120, 200, 150, 80, 70, 110, 130, 170, 180, 120, 90, 100], // y轴数据，可以根据实际情况修改  
      smooth: true // 平滑曲线  
    }]
  };
  window.onresize = myChart.resize;
  myChart.setOption(option);
})
onMounted(() => {
  var myChart = echarts.init(document.getElementById('main5'));
  var option = {
    title: {
      text: '用户反馈统计报表',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'], // 环形图的内半径和外半径  
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 335, name: '好评' },
          { value: 40, name: '差评' },
        ],
        // 设置中心文本  
        center: ['50%', '50%'],
      }
    ]
  };
  window.onresize = myChart.resize;
  myChart.setOption(option);
})
</script>